import React, { useEffect } from 'react'
import { Button, Form, Input, Card,message } from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
//引入api中的请求
import { 
  addHospitalRequest,
  getHosSetFromIdRequest,
  updateHosSetFromIdRequest 
} from '@/api/hospital/hospitalSet';

//引入类型限制
import type { 
  addHospitalParamType,
  updateHospitalParamType 
} from '@/api/hospital/model/hospitalSettypes';

import style from '../index.module.css'


export default function AddOrUpdateHosSet() {
    const navigate = useNavigate()

    //通过From组件上的一个useForm方法,可以创建实例,然后在某一个From组件上添加一个from属性,值为当前实例,那么From表单和当前的from实例就关联起来了
    const [form] = Form.useForm()

    const {id} = useParams()
    // console.log(id,'idddd');



    useEffect(()=>{
        //因为组件复用,在新增医院的时候不需要刚进入就发送请求,所以我们要判断当前是否有id
       if (id) {
        const getHosDetail = async ()=>{
            //发送请求
            const result =await getHosSetFromIdRequest(id)
            // console.log(result,'result');

            //From实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
            form.setFieldsValue(result)
            
        }
        getHosDetail()
       }
    })
    

    //1.新增医院的事件回调函数
    const addHosFinisHanddle = async(fieldValue:addHospitalParamType)=>{
        console.log(fieldValue);
        console.log(id ,'id');
        //判断当前组件是否存在id 如果有则代表修改 没有则新增
        if(id){
        await updateHosSetFromIdRequest({...fieldValue,id})
        message.success('修改数据成功')

        }else{
        //发送新增请求
        await addHospitalRequest(fieldValue)
        message.success('新增数据成功')
        }

        //新增成功以后返回医院设置页面
        navigate('/syt/hospital/hospitalSet')
    }

    //2.新增成功以后返回医院设置页面
    const goBackHandle = ()=>{
        navigate(-1)
    }


  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 18 }}
        onFinish={addHosFinisHanddle}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ 
            required: true, 
            message: '请输入医院名称'
          }]}
         
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ 
            required: true,
             message: '请输入医院编号'
            }]}

        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ 
            required: true, 
            message: '请输入api基础路径'
          }]}

        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ 
            required: true, 
            message: '请输入联系人姓名'
          }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{ 
            required: true, 
            message: '请输入联系人手机'
          }]}

        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: 3 }}
        >
          <Button  type="primary" htmlType="submit" className={style.mr}>
            提交
          </Button>
          <Button onClick={goBackHandle} type="default" htmlType="button">
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
